<template>
  <div>
    <view class="u-tabs-box" v-if="logisticsList.length > 1">
      <u-tabs
        bg-color="#fff"
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <view class="logistics-detail">
      <view class="card">
        <view class="card-title">
          <span>
            <span>{{ logisticsList[current].logisticsName }}</span>
            <span style="margin-left: 18rpx">{{
              logisticsList[current].logisticsNo
            }}</span>
          </span>
          <span @click="onCopy(logisticsList[current].logisticsNo)">复制</span>
        </view>
        <view class="time-line">
          <u-time-line
            v-if="
              logisticsList[current].traces &&
              logisticsList[current].traces.traces
            "
          >
            <u-time-line-item
              nodeTop="2"
              v-for="(item, index) in logisticsList[current].traces.traces"
              :key="index"
            >
              <template v-slot:content>
                <view>
                  <view
                    class="u-order-desc"
                    :style="{ color: index == 0 ? '#009968' : '' }"
                    >{{ item.AcceptStation || item.remark }}</view
                  >
                  <view class="u-order-time">{{
                    item.AcceptTime || item.acceptTime
                  }}</view>
                </view>
              </template>
            </u-time-line-item>
          </u-time-line>
          <view
            style="
              display: flex;
              align-items: center;
              padding: 50rpx;
              justify-content: center;
            "
            >暂无物流信息</view
          >
        </view>
        <view class="address-box">
          <view class="top">
            <span class="tip">收</span>
            <span>{{ consigneeAddressPath }}{{ consigneeDetail }}</span>
          </view>
          <view class="bottom">
            <span>{{ consigneeName }}</span>
            <span>{{ consigneeMobile }}</span>
          </view>
        </view>
      </view>
      <!-- <view class="card">
        <div v-if="logisticsList && logisticsList.length > 0">
          <ul
            class="express-log"
            v-for="(packageItem, packageIndex) in logisticsList"
            :key="packageIndex"
            v-if="packageItem"
          >
            <div class="layui-layer-wrap">
              <dl>
                <dt>物流公司：</dt>
                <dd>
                  <div class="text-box">{{ packageItem.logisticsName }}</div>
                </dd>
              </dl>
              <dl>
                <dt>快递单号：</dt>
                <dd>
                  <div nctype="ordersSn" class="text-box">
                    <a
                      class="item"
                      :href="
                        'https://www.baidu.com/s?wd=' + packageItem.logisticsNo
                      "
                      target="_blank"
                      >{{ packageItem.logisticsNo }}</a
                    >
                  </div>
                </dd>
              </dl>
              <div class="div-express-log">
                <ul class="express-log express-log-name">
                  <li
                    v-for="(item, index) in packageItem.orderPackageItemList"
                    :key="index"
                  >
                    <p class="time" style="width: 50%">
                      <span>商品名称：</span><span>{{ item.goodsName }}</span>
                    </p>
                    <p class="time" style="width: 30%">
                      <span>发货时间：</span
                      ><span>{{ item.logisticsTime }}</span>
                    </p>
                    <p class="time" style="width: 20%">
                      <span>发货数量：</span
                      ><span>{{ item.deliverNumber }}</span>
                    </p>
                  </li>
                </ul>
              </div>
              <div class="div-express-log">
                <ul
                  class="express-log"
                  v-if="packageItem.traces && packageItem.traces.traces"
                >
                  <li
                    v-for="(item, index) in packageItem.traces.traces"
                    :key="index"
                  >
                    <span class="time">{{
                      item.AcceptTime || item.acceptTime
                    }}</span>
                    <span class="detail">{{
                      item.AcceptStation || item.remark
                    }}</span>
                  </li>
                </ul>
                <ul class="express-log" v-else>
                  <li>暂无物流信息</li>
                </ul>
              </div>
            </div>
          </ul>
        </div>
      </view> -->
    </view>
  </div>
</template>

<script>
import { getPackage } from "@/api/trade.js";
export default {
  data() {
    return {
      order: {},
      logisticsList: [],
      consigneeAddressPath: "",
      consigneeDetail: "",
      consigneeMobile: "",
      consigneeName: "",
      current: 0,
      list: [],
    };
  },
  components: {},
  computed: {},
  onLoad(option) {
    let sn = option.order_sn;
    this.consigneeAddressPath = option.consigneeAddressPath;
    this.consigneeDetail = option.consigneeDetail;
    this.consigneeMobile = option.consigneeMobile;
    this.consigneeName = option.consigneeName;
    this.tracesList(sn);
  },
  mounted() {},
  methods: {
    change(index) {
      this.current = index;
      uni.stopPullDownRefresh();
    },
    tracesList(sn) {
      getPackage(sn).then((res) => {
        if (res.data.success) {
          this.logisticsList = res.data.result;
          let arr = [];
          this.logisticsList.map((item, index) => {
            arr.push({
              name: "包裹" + (index + 1),
            });
          });
          this.list = arr;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.logistics-detail {
  padding: 16rpx;
  background: #fafafa;
}
.card {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx 28rpx;
  width: 100%;
  > .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    margin-bottom: 40rpx;
  }
  > .time-line {
    // padding: 16rpx 32rpx;
  }
  .address-box {
    height: 120rpx;
    padding-top: 35rpx;
    display: flex;
    flex-direction: column;
    border-top: 1rpx solid #e7e7e7;
    .top {
      display: flex;
      align-items: center;
      color: #212121;
      font-size: 28rpx;
      .tip {
        width: 40rpx;
        height: 40rpx;
        background: #eeeeee;
        border-radius: 50%;
        margin-right: 18rpx;
        color: #757575;
        font-size: 22rpx;
        line-height: 40rpx;
        text-align: center;
      }
    }
    .bottom {
      margin-left: 58rpx;
      font-size: 24rpx;
      color: #757575;
      margin-top: 16rpx;
      :first-child {
        margin-right: 18rpx;
      }
    }
  }
}
.u-order-title {
  font-weight: bold;
}
.u-order-desc {
  font-size: 26rpx;
  color: #666;
  margin: 10rpx 0;
}
.u-order-time {
  font-size: 24rpx;
  color: #999;
}
.empty {
  padding: 40rpx 0;
}
</style>